 <template>
 	<div class="orderBox">
 		<!-- tab切换 -->
 		<van-tabs shrink color="transparent" title-active-color="#17AC74" title-inactive-color="#5d626d"
 			@click-tab="clickTab">
 			<van-tab v-for="(item, index) in tabList" :key="index"
 				:title="item.num > 0 ? item.label + '(' + item.num + ')' : item.label">
 				<div class="listBox" v-if="index != 2">
 					<div v-if="dataNewList.length > 0">
 						<van-list :finished="finished" :finished-text="_t18(`no_more_data`)"
 							:loading-text="_t18(`loading`)" @load="onLoad" v-model:loading="loading">
 							<van-cell v-for="(item, index) in dataNewList" :key="index" :border="false">
 								<EntrustOrderItem :data="item" @reduceOrderNum="reduceOrderNum"></EntrustOrderItem>
 							</van-cell>
 						</van-list>
 					</div>
 					<Nodata v-if="loading == false && dataNewList.length <= 0"></Nodata>
 				</div>
 				<div v-else>
 					<view class="intro">

 						<div v-if="symbolInfo">
 							<view class="symbolInfo">
 								<view class="info-item">
 									<text class="item-key">{{symbolInfo.fullname}}</text>
 									<!-- <text class="item-value"></text> -->
 								</view>
 								<view class="info-item">
 									<text class="item-key">发行时间</text>
 									<text class="item-value">{{symbolInfo.publishTime}}</text>
 								</view>
 								<view class="info-item">
 									<text class="item-key">发行总量</text>
 									<text class="item-value">{{symbolInfo.maxQuantityUpplied}}</text>
 								</view>
 								<view class="info-item">
 									<text class="item-key">流通总量</text>
 									<text class="item-value">{{symbolInfo.currentTurnover}}</text>
 								</view>
 								<view class="info-item">
 									<text class="item-key">白皮书</text>
 									<text class="item-value">{{symbolInfo.whitePaperUrl}}</text>
 								</view>

 								<view class="info-item">
 									<text class="item-key">官网</text>
 									<text class="item-value">{{symbolInfo.officialWebsiteUrl}}</text>
 								</view>
 								<view class="info-item">
 									<text class="item-key">区块查询</text>
 									<text class="item-value">{{symbolInfo.exploreUrl}}</text>
 								</view>
 							</view>

 							<!-- 方式1：使用 v-html 渲染 -->
 							<div v-if="showAsHtml" v-html="symbolInfo.intro" class="intro-content"></div>

 						</div>
 						<div v-else class="loading-text">
 							正在加载简介信息...
 						</div>
 					</view>
 				</div>
 			</van-tab>
 		</van-tabs>
 		<div class="tab_right">
 			<svg-load :name="showEye ? 'yanjin-k' : 'yanjin-g'" class="entrustRImg" @click="handelEye"></svg-load>
 			<svg-load name="shuaxin" class="entrustRImg" @click="refresh"></svg-load>
 		</div>
 	</div>
 </template>

 <script setup>
 	import {
 		formatCurrentcurrency
 	} from '@/utils/filters'
 	import {
 		_t18
 	} from '@/utils/public'
 	import {
 		onMounted,
 		ref
 	} from 'vue'
 	import EntrustOrderItem from './EntrustOrderItem.vue'
 	import {
 		getOrderListCurrencyApi
 	} from '@/api/trade/index'
 	import {
 		useUserStore
 	} from '@/store/user/index'
 	import {
 		useRoute
 	} from 'vue-router'
 	import {
 		showOrdecoinInfo
 	} from '@/api/trade/index'
 	const $route = useRoute()
 	const userStore = useUserStore()
 	const props = defineProps({
 		coinInfo: {
 			type: Object,
 			default: () => {}
 		}
 	})
 	const tabList = ref([{
 			label: _t18(`exchange_curentrust`, ['bitmake', 'ebc']),
 			value: 0,
 			num: 0
 		},
 		{
 			label: _t18(`exchange_hisentrust`, ['bitmake', 'ebc', 'rxce']),
 			value: 1,
 			num: 0
 		},
 		{
 			label: _t18(`简介`, ['bitmake', 'ebc', 'rxce']),
 			value: 2,
 			num: 0
 		}
 	])
 	/**
 	 * 订单数据
 	 */
 	// 数据列表
 	const showEye = ref(true)
 	const loading = ref(false)
 	const finished = ref(false)
 	const total = ref(0)
 	const pageSize = ref(10)
 	const pageNum = ref(1)
 	const dataList = ref([])
 	const dataNewList = ref([])
 	const symbolInfo = ref('')
 	const showAsHtml = ref(true) // 控制显示方式
 	// 上拉加载分页
 	const onLoad = () => {
 		loading.value = true
 		getOrderList(orderType.value)
 	}
 	const getOrderList = async (status) => {
 		loading.value = true
 		finished.value = false
 		let params =
 			`isAsc=desc&orderByColumn=updateTime&status=${status}&pageSize=${pageSize.value}&pageNum=${pageNum.value}`
 		const res = await getOrderListCurrencyApi(params)
 		if (res.code == '200') {
 			setTimeout(() => {
 				loading.value = false
 				res.rows && dataList.value.push(...res.rows)
 				filterEyes(props.coinInfo.coin)
 				total.value = res.total
 				if (dataList.value.length >= total.value) {
 					finished.value = true
 				}
 				pageNum.value++
 			}, 500)
 			if (status == 0) {
 				tabList.value[0].num = res.total
 			} else if (status == 1) {
 				tabList.value[1].num = res.total
 			}
 		}
 	}
 	const getNum = async (status) => {
 		let params =
 			`isAsc=desc&orderByColumn=updateTime&status=${status}&pageSize=${pageSize.value}&pageNum=${pageNum.value}`
 		const res = await getOrderListCurrencyApi(params)
 		if (res.code == '200') {
 			if (status == 0) {
 				tabList.value[0].num = res.total
 			} else if (status == 1) {
 				tabList.value[1].num = res.total
 			}
 		}
 	}
 	// 切换列表
 	const orderType = ref(0)
 	const clickTab = (e) => {
 		dataList.value = []
 		dataNewList.value = []
 		pageNum.value = 1
 		orderType.value = e.name


 		if (e.name == 2) {
 			const symbol = $route.query.symbol
 			const type = $route.query.type || 2 // 默认币币交易类型

 			showOrdecoinInfo(symbol, type).then(res => {
 				console.log('API返回数据:', res)
 				if (res && res.data && res.data.symbolInfo && res.data.symbolInfo.length > 0) {
 					// 将HTML字符串转换为rich-text格式
 					const htmlString = res.data.symbolInfo[0]
 					// 尝试直接使用HTML字符串
 					symbolInfo.value = htmlString
 				} else {
 					symbolInfo.value = '暂无简介信息'
 				}
 			}).catch(error => {
 				console.error('获取简介信息失败:', error)
 				symbolInfo.value = '获取简介信息失败'
 			})

 		} else {
 			getOrderList(orderType.value)
 		}

 	}
 	const init = () => {
 		console.log('OrderListBox 初始化')
 		console.log('当前路由参数:', $route.query)
 		console.log('初始 symbolInfo:', symbolInfo.value)
 		getOrderList(0)
 		getNum(1)
 	}
 	onMounted(() => {
 		init()
 	})
 	//刷新订单
 	const refresh = () => {
 		dataList.value = []
 		dataNewList.value = []
 		pageNum.value = 1
 		if (orderType.value == 0) {
 			getOrderList(0)
 			getNum(1)
 		}
 		if (orderType.value == 1) {
 			getOrderList(1)
 			getNum(0)
 		}
 	}
 	// 撤单
 	const reduceOrderNum = () => {
 		refresh()
 		userStore.getUserInfo()
 	}
 	/**
 	 * 点击小眼睛
 	 */
 	const handelEye = () => {
 		showEye.value = !showEye.value
 		filterEyes(props.coinInfo.coin)
 	}
 	// 过滤当前币种订单
 	const filterEyes = (coin) => {
 		if (showEye.value) {
 			dataNewList.value = dataList.value
 		} else {
 			dataNewList.value = formatCurrentcurrency(dataList.value, coin)
 		}
 	}
 	defineExpose({
 		refresh
 	})
 </script>

 <style lang="scss" scoped>
 	.intro {
 		padding: 15px;
 		background: var(--bgColor);
 		min-height: 200px;
 		line-height: 1.6;
 		font-size: 14px;
 		color: var(--text-color);
 		position: relative;

 		.debug-info {
 			background: #f0f0f0;
 			padding: 10px;
 			margin-bottom: 15px;
 			border-radius: 4px;
 			font-size: 12px;
 			color: #666;

 			p {
 				margin: 5px 0;
 			}
 		}

 		.debug-buttons {
 			margin-bottom: 15px;

 			button {
 				padding: 5px 10px;
 				margin-right: 10px;
 				border: 1px solid #ddd;
 				background: #fff;
 				cursor: pointer;
 				border-radius: 4px;

 				&.active {
 					background: #007aff;
 					color: #fff;
 					border-color: #007aff;
 				}
 			}
 		}

 		.loading-text {
 			text-align: center;
 			color: var(--text-color-secondary);
 			font-size: 12px;
 		}

 		.symbolInfo {
 			padding: 0 20px 20px 20px;
 			display: flex;
 			flex-direction: column;
 			border-bottom: 1px solid #e3e3e3;
			margin-bottom: 20px;

 			.info-item {
 				height: 40px;
 				line-height: 40px;
 				display: flex;

 				.item-key {
 					display: block;
 					flex: 1;
 					white-space: nowrap;
 				}

 				.item-value {
 					// width: 20%;
 					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left:20px;
 				}
 			}

 		}

 		.intro-content {

 			font-size: 14px;

 			padding: 0 20px 20px 20px;
 			// box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 			// border: 1px solid rgba(0, 0, 0, 0.06);
 			position: relative;
 			overflow: hidden;



 			p {
 				// margin: 15px 0;
 				text-align: justify;
 				text-indent: 2em;
 				position: relative;

 				&:first-child {
 					margin-top: 0;
 					font-weight: 500;
 					color: var(--text-color);
 				}

 				&:last-child {
 					margin-bottom: 0;
 				}
 			}

 			br {
 				display: block;
 				margin: 8px 0;
 			}

 			// 响应式设计
 			@media (max-width: 768px) {
 				// padding: 15px;
 				font-size: 13px;
 				line-height: 1.6;
 			}
 		}

 	}

 	.orderBox {
 		position: relative;
 	}

 	:deep(.van-tabs__wrap) {
 		border-bottom: 1px solid var(--ex-border-color);
 	}

 	:deep(.van-tabs__nav) {
 		padding-right: 80px;
 		background: var(--bgColor) !important;
 	}

 	.tab_right {
 		position: absolute;
 		top: 0;
 		right: 0;
 		background: var(--bgColor) !important;
 		;
 		padding: 15px 5px;

 		.entrustRImg {
 			padding: 0 8px;
 			font-size: 12px;
 		}
 	}

 	.listBox {
 		padding: 0;
 	}

 	.van-cell {
 		background: var(--bgColor) !important;
 		padding: 0;
 		border-bottom: 1px solid var(--ex-border-color);
 	}
 </style>